<template>
  <div>
    <van-nav-bar
      class="login"
      title="忘记密码"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 表单 -->
    <van-form @submit="onSubmit" ref="regForm">
      <van-field
        v-model="username"
        name="username"       
        label="手机号"
        placeholder="请填写手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机格式错误' },
        ]"
      />

     <van-field
        v-model="password"
        type="password"
        name="password"
        label="新密码"
        placeholder="新密码"
        :rules="[
          { required: true, message: '请填写新密码' },
          { validator: (e) => /^\w{6,12}$/.test(e), message: '密码格式错误' },
        ]"
      />


      <van-field
        v-model="vercode"
        name="vercode"
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' },
        ]"
      >

        <template #button>
          <van-button
            size="small"
            type="primary"
            color="#07c160"
            @click="sendSms"
            native-type="button"
            :disabled="codeBtnDisabled"
            >{{code_text}}</van-button
          >
        </template>
      </van-field>

     
      <div style="margin: 16px">
        <van-button round block type="info" color="#07c160" native-type="submit" 
          >确定</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field } from "vant";
import {  sendSms , delete_user,Forget} from "@/api/user";

export default {
  name: "forget",
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
  },
  data() {
    return {
      username: "",
      password: "",
      vercode: "",
      codeBtnDisabled:false,
      code_text:'发送验证码'
    };
  },
  mounted() {
    // delete_user({
    //     username:'13460076738',
    //     password:'123456'
    // }).then(res=>{
    //     console.log(res)
    // })
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);

      Forget(values).then((res)=>{
        console.log(res)
      })
    },
    async sendSms() {
      
      try{
         let validate_res = await this.$refs.regForm.validate("username");
        //1.准备请求接口
         this.codeBtnDisabled = true;
         this.code_text = '发送中...'
         
         sendSms({
            mobile: this.username,
            type: "Forget",
        }).then((res) => {
            console.log(res);

            if(res.code == 0){
                //发送成功
                this.$toast(`短信已经发送到手机号${this.username},请注意查收，不要泄露`)
                let count = 60;
                let timer = setInterval(()=>{
                    count--;
                    this.code_text = `${count}s后再次获取`;

                    if(count<=0){
                        clearInterval(timer);
                        this.code_text = `再次发送`;
                        this.codeBtnDisabled = false;
                        count = 60
                    }
                },1000)
               
            }else{
                this.$toast(res.msg || '发送失败')
                    this.codeBtnDisabled = false;
                    this.code_text = '再次发送'
                }
        }).catch(err=>{
            console.log(err)

            this.$toast(err.msg || '发送失败')
            this.codeBtnDisabled = false;
            this.code_text = '再次发送'
        })

      
      }catch(e){

      }
     
        // sendSms({
        //     mobile: this.username,
        //     type: " Forget",
        // }).then((res) => {
        //     console.log(res);
        // })

     
    },
  },
};
</script>

<style>
</style>